<template>
  <div id="product_detail">
    <!-- 导航栏 -->
    <navbar title="商品详情页面" />
    <div class="main">
      <!-- 商品图片轮播图 -->
      <van-swipe class="swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(image, index) in productObj.images" :key="'image_' + index">
          <van-image :src="image" class="image" fit="cover" @click="previewImage" />
        </van-swipe-item>
      </van-swipe>
      <!-- 商品信息展示 -->
      <div class="product_info">
        <div class="product_info__name">{{ productObj.name }}</div>
        <div class="product_info__desc">{{ productObj.desc }}</div>
        <div class="product_info_price">
          <div class="product_info__price">{{ productObj.formats[0].price | calcPrice }}</div>
          <div class="product_info__old_price">{{ productObj.formats[0].old_price | calcPrice }}</div>
        </div>
      </div>
      <!-- 商品详情展示 -->
      <van-cell-group title="商品规格">
        <van-cell title="当前规格" :value="productObj.formats[0].format_label" />
        <van-cell title="原产地" :value="productObj.location" />
      </van-cell-group>
      <van-cell-group title="商品详情">
        <van-collapse v-model="activeDetail" @change="onDetailChange">
          <van-collapse-item title="详情" name="detail">
            <div class="product__detail" v-html="productObj.detail"></div>
          </van-collapse-item>
        </van-collapse>
      </van-cell-group>
    </div>

    <!-- 商品导航 -->
    <van-goods-action>
      <van-goods-action-icon icon="cart-o" text="购物车" color="#5ba0f4" @click="onClickCartIcon" />
      <van-goods-action-icon icon="star-o" text="收藏" color="#ff5000" @click="onClickStarIcon" />
      <van-goods-action-button type="danger" text="立即购买" @click="onClickPurchaseButton" />
    </van-goods-action>

    <!-- sku面板 -->
    <van-sku
      v-model="skuShow"
      :sku="sku"
      :goods="goods"
      :goods-id="pId"
      :hide-stock="sku.hide_stock"
      :hide-quota-text="true"
      :initial-sku="initSku"
      @buy-clicked="onBuyClicked"
      @add-cart="onAddCartClicked"
    />
  </div>
</template>

<script>
import NavBar from '../components/NavBar.vue'
import { IMAGE_PREFIX } from '../config'
import wx from 'weixin-js-sdk'

const sku = {
  // 所有sku规格类目与其值的从属关系，比如商品有颜色和尺码两大类规格，颜色下面又有红色和蓝色两个规格值。
  // 可以理解为一个商品可以有多个规格类目，一个规格类目下可以有多个规格值。
  tree: [
    {
      k: '请选择规格', // skuKeyName：规格类目名称
      k_s: 's1', // skuKeyStr：sku 组合列表（下方 list）中当前类目对应的 key 值，value 值会是从属于当前类目的一个规格值 id
      v: [
        {
          id: '1', // skuValueId：规格值 id
          name: '规格1' // skuValueName：规格值名称
        },
        {
          id: '2',
          name: '规格2'
        }
      ],
      largeImageMode: false //  是否展示大图模式
    }
  ],
  // 所有 sku 的组合列表，比如红色、M 码为一个 sku 组合，红色、S 码为另一个组合
  list: [
    {
      id: 2259, // skuId
      s1: '1', // 规格类目 k_s 为 s1 的对应规格值 id
      price: 100, // 价格（单位分）
      stock_num: 110 // 当前 sku 组合对应的库存
    },
    {
      id: 2250, // skuId
      s1: '1', // 规格类目 k_s 为 s1 的对应规格值 id
      price: 200, // 价格（单位分）
      stock_num: 110 // 当前 sku 组合对应的库存
    }
  ],
  price: '1.00', // 默认价格（单位元）
  none_sku: false, // 是否无规格商品
  hide_stock: true, // 是否隐藏剩余库存
  quota: 100 // 限购数量
}

export default {
  components: {
    navbar: NavBar
  },
  data() {
    return {
      // 商品id
      pId: 0,
      // 商品对象
      productObj: {},
      // 详情展开
      activeDetail: [],
      // sku 面板显示与隐藏
      skuShow: false,
      sku: sku,
      goods: {},
      // 初始化的sku
      initSku: {
        s1: '1'
      }
    }
  },
  methods: {
    /**
     * 业务:获取商品详情数据
     */
    getProductDetail(productId) {
      this.$http
        .get(`/products/query?id=${productId}`)
        .then(({ data: res }) => {
          const { meta, data } = res
          if (meta.code !== 200) {
            return this.$notify(meta.code)
          }
          this.productParser(data)
        })
        .catch(error => {
          this.$notify(error)
        })
    },
    // 商品详情数据解析器
    productParser(rowData) {
      console.log(rowData)
      const {
        name,
        image: imageStr,
        info: desc,
        source: location,
        content: detail,
        list
      } = rowData
      const images = imageStr.split(';').map(item => IMAGE_PREFIX + item)
      const formats = []
      // sku tree v
      const vs = []
      // sku list
      const skuList = []
      list.forEach(item => {
        // console.log(item)
        const { id, scale: formatLabel, price, oldPrice } = item
        const format = {
          id,
          format_label: formatLabel,
          price,
          old_price: oldPrice
        }
        // 当前规格的v （sku）
        const v = {
          id: '' + id,
          name: formatLabel
        }
        // 当前规格的list数据（sku）
        const li = {
          id: id,
          s1: '' + id,
          price: price,
          // TODO 当前规格的库存
          stock_num: 1000
        }
        formats.push(format)
        vs.push(v)
        skuList.push(li)
      })
      this.productObj = {
        name: name,
        desc: desc,
        formats: formats,
        detail: detail,
        images: images,
        location: location
      }
      // 组装sku数据
      this.sku.tree[0].v = vs
      // console.log(vs)
      this.sku.price = formats[0].price / 100
      this.sku.list = skuList
      // 组装 goods 数据
      this.goods = {
        picture: images[0]
      }
    },
    // 点击购物车按钮
    onClickCartIcon() {
      this.$router.push('/cart')
    },
    // 点击 购买 按钮
    onClickPurchaseButton() {
      // 打开SKU面板
      this.skuShow = true
    },
    // 展开详情
    onDetailChange(activeNames) {
      this.activeDetail = activeNames
    },
    // 点击图片
    previewImage(e) {
      // console.log(e)
      wx.previewImage({
        current: this.productObj.images[0], // 当前显示图片的http链接
        urls: this.productObj.images // 需要预览的图片http链接列表
      })
    },
    // SKU面板 点击购买
    onBuyClicked(skuData) {
      console.log('购买 ,', skuData)
      const fId = skuData.selectedSkuComb.id
      const { selectedNum: quantity, goodsId: pId } = skuData
      console.log(`>>>购买商品>>> id：${pId}, 数量：${quantity}`)
      this.$http
        .post('/order/fast_order', {
          productId: pId,
          scaleId: fId,
          quantity: quantity
        })
        .then(({ data: resp }) => {
          const { meta } = resp
          if (meta.code !== 201) {
            return this.$notify.fail(meta.msg)
          }
          this.skuShow = false
          this.$toast.success(meta.msg)
          // TODO 成功之后跳转到订单页面
        })
        .catch(err => {
          this.$notify('出现未知错误')
          console.log(err)
        })
    },
    // SKU面板 点击加入购物车
    onAddCartClicked(skuData) {
      console.log('<<<加入购物车 <<<', skuData)
      const { goodsId: pId, selectedNum: quantity } = skuData
      // 获取规格id
      const fId = skuData.selectedSkuComb.id
      const postDate = {
        productId: pId,
        scaleId: fId,
        quantity: quantity
      }
      // console.log(postDate)
      // 加入购物车
      this.$http
        .post('/shopping_cart/add', postDate)
        .then(({ data: resp }) => {
          const { meta } = resp
          if (meta.code !== 201) {
            this.skuShow = false
            return this.$toast.fail(meta.msg)
          }
          this.$toast.success(meta.msg)
          this.skuShow = false
        })
        .catch(_ => {
          this.$notify('出现未知错误')
        })
    },
    // 点击收藏icon
    onClickStarIcon() {
      // TODO 收藏
      this.$toast.success('收藏成功')
    }
  },
  created() {
    // 获取路由地址上的商品id
    const productId = this.$route.params.product_id
    // 设置商品id
    this.pId = parseInt(productId)
    // console.log('productId: ', productId)
    this.getProductDetail(productId)
  },
  filters: {
    calcPrice(value) {
      return value / 100
    }
  }
}
</script>

<style lang="less" scope="scoped">
#product_detail {
  width: 100%;
  box-sizing: border-box;
  .main {
    margin-bottom: 55px;
    box-sizing: border-box;
    .swipe {
      width: 100%;
      height: 230px;
      box-sizing: border-box;
      .image {
        width: 100%;
        height: 100%;
      }
    }
    .product_info {
      box-sizing: border-box;
      width: 100%;
      margin: 5px auto;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: flex-start;
      padding: 2px 8px;
      box-shadow: 0 0 1px #7f8c8d;
      .product_info__name {
        font-size: 16px;
      }
      .product_info__desc {
        color: #bdc3c7;
        font-size: 13px;
        width: 100%;
        flex-wrap: wrap;
        text-align: left;
        margin: 5px auto;
      }
      .product_info_price {
        display: flex;
        flex-direction: row;
        align-items: flex-end;
        .product_info__price {
          color: #e74c3c;
          margin-right: 5px;
        }
        .product_info__price::before {
          content: '¥';
        }
        .product_info__old_price {
          font-size: 14px;
          text-decoration: line-through;
        }
        .product_info__old_price::before {
          content: '¥';
        }
      }
      // 详情html
      .product__detail {
        width: 100%;
      }
    }
  }
}
.van-cell-group__title {
  font-size: 12px;
}
.van-cell {
  padding: 5px 16px;
}
</style>
